import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { ChevronRight, ChevronDown, MoreVertical } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { TaskDialog } from "./TaskDialog";
import type { Task } from "@/types/task";

const priorityStyles = {
  low: "bg-slate-100 text-slate-800",
  medium: "bg-blue-100 text-blue-800",
  high: "bg-orange-100 text-orange-800",
  urgent: "bg-red-100 text-red-800",
};

const statusStyles = {
  todo: "bg-yellow-100 text-yellow-800",
  doing: "bg-blue-100 text-blue-800",
  done: "bg-green-100 text-green-800",
};

const typeStyles = {
  feature: "bg-purple-100 text-purple-800",
  task: "bg-blue-100 text-blue-800",
  bug: "bg-red-100 text-red-800",
};

interface TaskItemProps {
  task: Task;
  level?: number;
  onUpdate: (taskId: string, updates: Partial<Task>) => void;
  onDelete: (taskId: string) => void;
}

export function TaskItem({
  task,
  level = 0,
  onUpdate,
  onDelete,
}: TaskItemProps) {
  const [expanded, setExpanded] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const hasChildren = task.children && task.children.length > 0;

  return (
    <div>
      <Card className="p-4 hover:shadow-md transition-shadow">
        <div className="flex items-center gap-2">
          {hasChildren && (
            <button
              onClick={() => setExpanded(!expanded)}
              className="p-1 hover:bg-gray-100 rounded"
            >
              {expanded ? (
                <ChevronDown className="h-4 w-4" />
              ) : (
                <ChevronRight className="h-4 w-4" />
              )}
            </button>
          )}
          <div
            className="flex-1"
            style={{ paddingLeft: hasChildren ? 0 : level * 24 + "px" }}
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="font-medium">{task.title}</span>
                {task.assignee && (
                  <Badge variant="outline">{task.assignee}</Badge>
                )}
              </div>
              <div className="flex items-center gap-2">
                <div className="flex gap-2">
                  {task.priority && (
                    <Badge className={priorityStyles[task.priority]}>
                      {task.priority}
                    </Badge>
                  )}
                  <Badge className={statusStyles[task.status]}>
                    {task.status}
                  </Badge>
                  <Badge className={typeStyles[task.type]}>{task.type}</Badge>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <button className="p-1 hover:bg-gray-100 rounded">
                      <MoreVertical className="h-4 w-4" />
                    </button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    <DropdownMenuItem onClick={() => setDialogOpen(true)}>
                      编辑
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      className="text-red-600"
                      onClick={() => onDelete(task.id)}
                    >
                      删除
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
            {task.description && (
              <p className="text-sm text-gray-500 mt-2">{task.description}</p>
            )}
            <div className="flex gap-4 mt-2 text-sm text-gray-500">
              {task.estimatedHours && <span>预计: {task.estimatedHours}h</span>}
              {task.startTime && (
                <span>开始: {task.startTime.toLocaleDateString()}</span>
              )}
              {task.endTime && (
                <span>结束: {task.endTime.toLocaleDateString()}</span>
              )}
            </div>
          </div>
        </div>
      </Card>

      <TaskDialog
        task={task}
        open={dialogOpen}
        onOpenChange={setDialogOpen}
        onSave={(updates) => onUpdate(task.id, updates)}
        onDelete={() => onDelete(task.id)}
      />

      {hasChildren && expanded && task.children && (
        <div className="ml-6">
          {task.children.map((child) => (
            <TaskItem
              key={child.id}
              task={child}
              level={level + 1}
              onUpdate={onUpdate}
              onDelete={onDelete}
            />
          ))}
        </div>
      )}
    </div>
  );
}
